<template>
    <el-table :data="menuList" border style="width: 100%">
        <el-table-column prop="menuName" label="菜单名称" />
        <el-table-column prop="url" label="URL" width="200" />
        <el-table-column prop="parendName" label="父级菜单" width="110" />
        <el-table-column prop="createName" label="创建人" width="90" />
        <el-table-column prop="createTime" label="创建时间">
            <template v-slot="scope">
                {{ scope.row.createTime.substring(0, 10) + " " + scope.row.createTime.substring(11, 19) }}
            </template>
        </el-table-column>
        <el-table-column prop="updateName" label="修改人" width="90" />
        <el-table-column prop="updateTime" label="修改时间">
            <template v-slot="scope">
                {{ scope.row.updateTime ? scope.row.updateTime.substring(0, 19).replace('T', ' ') : '' }}
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template v-slot="scope">
                <el-link style="margin: 0 3px;" type="danger" size="small"
                    @click="DeleteMeun(scope.row.menuId)">删除</el-link>
                <el-link style="margin: 0 3px;" type="warning" size="small" @click="update(scope.row)">修改</el-link>
            </template>
        </el-table-column>
    </el-table>
    <!-- 修改对话框 -->
    <el-dialog v-model="dialogFormVisible" title="修改菜单信息" width="500">
        <el-form ref="ruleFormRef" style="width: 350px;" :model="ruleForm" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="父级菜单">
                <el-select v-model="ruleForm.pId" placeholder="请选择父级菜单" clearable>
                    <el-option v-for="item in parentList" :label="item.menuName" :value="item.menuId"
                        :key="item.menuId" />
                </el-select>
            </el-form-item>
            <el-form-item label="菜单名称" prop="menuName" @change="menuonly">
                <el-input v-model="ruleForm.menuName" />
            </el-form-item>
            <el-form-item label="跳转的Url地址" prop="url">
                <el-input v-model="ruleForm.url" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    保存
                </el-button>
                <el-button type="primary" @click="dialogFormVisible = false">
                    取消
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios';
import { useRouter } from 'vue-router';
import { useCounterStore } from '@/stores/counter';
import { ElMessageBox } from 'element-plus'
const apiUrl = import.meta.env.VITE_APP_API_URL;
const store = useCounterStore();
const router = useRouter();

const menuList = ref([])
const getmenuList = () => {
    axios.get(apiUrl + '/T5/Message/GetMenuAll')
        .then(res => {
            menuList.value = res.data.data
            console.log(menuList.value)
        })
}
//#region 修改
const dialogFormVisible = ref(false)
const ruleForm = reactive({
    menuId: 0,
    menuName: "",
    url: "",
    pId: null,
    updateName: store.ccstore.nickName,
    updateTime: Date.now,
})
//修改方法
const update = (row: any) => {
    console.log(row)
    dialogFormVisible.value = true
    ruleForm.menuId = row.menuId
    ruleForm.menuName = row.menuName
    ruleForm.url = row.url
    ruleForm.pId = row.pId
}
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
//菜单名称，Url，非空验证
const rules = reactive<FormRules>({
    menuName: [
        { required: true, message: '菜单名称不可为空', trigger: 'blur' },
    ],
    url: [
        { required: true, message: '跳转的Url地址不可为空', trigger: 'blur' },
    ],
})
//唯一性验证的结果
const inter = <any>ref([])
//菜单名称唯一性验证
const menuonly = () => {
    axios.get(apiUrl+'/T5/Message/Only', {
        params: {
            MenuId: ruleForm.pId,
            MenuName: ruleForm.menuName
        }
    }).then(res => {
        inter.value = res.data.code
    })
}
//修改
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (inter.value == 209) {
                ElMessage.error("该菜单名称已经存在")
                return;
            }
            axios.post(apiUrl+'/T6/Message/UpdateMenu', ruleForm).then(res => {
                if (res.data.code == 206) {
                    ElMessage.success(res.data.msg);
                    dialogFormVisible.value = false

                    getmenuList();
                } else {
                    ElMessage.error("res.data.msg");
                }
            })
        }
    })
}
//获取父级菜单
const parentList = ref([])
const getparentList = () => {
    axios.get(apiUrl+'/T5/Message/GetMenuAll').then(res => {
        parentList.value = res.data.data
    })
}

//#endregion
//删除


//#region  删除
const DeleteMeun = (ids: number) => {
    ElMessageBox.confirm(
        '您确认要删除此菜单吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        axios.get(apiUrl+'/T5/Message/GetPId', {
            params: {
                MenuId: ids
            }
        })

            .then(res => {
                if (res.data.data > 0) {
                    ElMessageBox.confirm(
                        '该菜单含有子集,是否将该菜单所有的子集全部删除(包含此菜单)',
                        '警告',
                        {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning',
                        }
                    ).then(() => {
                        deletemenu(ids);
                    })
                }
                else {
                    deletemenu(ids);
                }
            })
    })
}

const deletemenu = (ids: number) => {
    axios.post(apiUrl+'/T6/Message/DelMenu',
        { 'MenuId': ids }).then(res => {
            if (res.data.code == 204) {
                ElMessage.success(res.data.msg)
                getmenuList();
            }
            else {
                ElMessage.error(res.data.msg)
            }
        })
}


//#endregion
onMounted(() => {
    getmenuList();
    getparentList();
})


</script>